import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { RouterList } from '../../router/Indext';
import { Outlet, useNavigate } from 'react-router-dom';
import { Select, Space } from 'antd';
import i18n from '../../i18n/i18n';
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];
function Index() {
    const why = useNavigate()
    const [name, setName] = useState(localStorage.getItem('username'))
    const geti18n = localStorage.getItem('langeh') || i18n.language || 'zh'
    const handleChange = (value: string) => {
        i18n.changeLanguage(value)
        localStorage.setItem('langeh', value)
    }
    const [getheme, setGetheme] = useState(localStorage.getItem('newdata') || 'light')
    const handleChanges = (value: string) => {
        const theme = document.documentElement
        theme.setAttribute('data-theme', value)
        localStorage.setItem('newdata', value)
        setGetheme(value)

    };
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    const erji = (arr) => {
        return arr.map((item) => {
            return {
                key: item.path,
                children: item.children ? erji(item.children) : null,
                label: item.title
            }
        })
    }
    const items = erji(RouterList)
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <div>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                    <div className="demo-logo-vertical" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={({ key }) => why(key)} />
                </Sider>
                <Layout>
                    <Header style={{ padding: 0, background: colorBgContainer }} >



                        <div style={{ marginLeft: '70%' }}>
                            <Select
                                defaultValue={geti18n}
                                style={{ width: 120 }}
                                onChange={handleChange}
                                options={[
                                    { value: 'en', label: '英文' },
                                    { value: 'zh', label: '中文' },

                                ]}
                            />
                            <Select
                                defaultValue={getheme}
                                style={{ width: 120 }}
                                onChange={handleChanges}
                                options={[
                                    { value: 'lingh', label: '日间' },
                                    { value: 'dark', label: '夜间' },

                                ]}
                            />
                            用户名称{name}
                            <img style={{ width: '30px', height: '30px' }} src="https://tse1-mm.cn.bing.net/th/id/OIP-C.deZmpfIuFc9tDLyrctcSXwHaEK?w=326&h=183&c=7&r=0&o=5&dpr=1.6&pid=1.7" alt="" />
                        </div>
                    </Header>
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
                        <div
                            style={{
                                padding: 24,
                                minHeight: 360,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet />
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        </div>
    )
}

export default Index
